<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__log-error">
      <el-form :inline="true" :model="dataForm" @submit.native.prevent  @keydown.enter.native.prevent="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.name" placeholder="用户名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="info" @click="exportHandle()">导出</el-button> -->
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border  style="width: 100%;">
        <el-table-column prop="requestUser" label="请求用户" header-align="center" width="80" :show-overflow-tooltip="true" align="center"></el-table-column>
        
        <el-table-column prop="requestUri" label="请求URI" header-align="center" align="center" width="140" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requestMethod" label="请求方式" header-align="center" align="center"></el-table-column>
        <el-table-column prop="requestParams" label="请求参数" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="ip" label="操作IP" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="errorInfo" label="错误信息" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="gmtCreate" label="创建时间" sortable header-align="center" align="center" width="180">
        </el-table-column>
        <el-table-column label="异常信息" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="infoHandle(scope.row.errorInfo)">异常信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import servicesApi from '@/services/servicesApi'
export default {
  data() {
    return {
      dataForm: {
        name: '',
      },               // 查询条件
      dataList: [
        { requestUser: 'admin', errorInfo: `
        s
        s
        `}
      ],               // 数据列表
      order: '',                  // 排序，asc／desc
      orderField: '',             // 排序，字段
      pageIndex: 1,                    // 当前页码
      pageSize: 10,                  // 每页数
      totalPage: 0,                   // 总条数
      dataListLoading: false,     // 数据列表，loading状态
      dataListSelections: [],     // 数据列表，多选项
      addOrUpdateVisible: false   // 新增／更新，弹窗visible状态
    }
  },
  created() {
    this.query()
  },
  activated() {
    this.query()
  },
  methods: {
    // 异常信息
    infoHandle(info) {
      this.$alert(info, '错误信息', {
        customClass: 'mod-sys__log-error-view-info'
      })
    },
    // 获取数据列表
    query() {
      let pageInfo = {
        current: this.pageIndex,
        size: this.pageSize,
        name: this.dataForm.name,
      }
      this.dataListLoading = true
      servicesApi.getLogError(pageInfo).then(res => {
        this.dataListLoading = false
        let code = res.data.code
        let data = res.data.data
        let msg = res.data.msg
        if (code !== 200) {
          this.dataList = []
          this.totalPage = 0
          return this.$message.error(msg)
        }
        this.dataList = data.list
        this.totalPage = data.total
      })


      // this.dataListLoading = true
      // this.$http.get(
      //   this.mixinViewModuleOptions.getDataListURL,
      //   {
      //     params: {
      //       order: this.order,
      //       orderField: this.orderField,
      //       pageIndex: this.mixinViewModuleOptions.getDataListIsPage ? this.pageIndex : null,
      //       pageSize: this.mixinViewModuleOptions.getDataListIsPage ? this.pageSize : null,
      //       ...this.dataForm
      //     }
      //   }
      // ).then(({ data: res }) => {
      //   this.dataListLoading = false
      //   if (res.code !== 0) {
      //     this.dataList = []
      //     this.pageSize = 0
      //     return this.$message.error(res.msg)
      //   }
      //   this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
      //   this.pageSize = this.mixinViewModuleOptions.getDataListIsPage ? res.data.pageSize : 0
      // }).catch(() => {
      // this.dataListLoading = false
      // })
    },
    // 多选
    dataListSelectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 排序
    dataListSortChangeHandle(data) {
      if (!data.order || !data.prop) {
        this.order = ''
        this.orderField = ''
        return false
      }
      this.order = data.order.replace(/ending$/, '')
      this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
      this.query()
    },
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.query()
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.pageIndex = val
      this.query()
    },
    getDataList: function() {
      this.pageIndex = 1
      this.query()
    },

    // 关闭当前窗口
    closeCurrentTab(data) {
      let tabName = this.$store.state.contentTabsActiveName
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
        return false
      }
      if (tabName === this.$store.state.contentTabsActiveName) {
        this.$router.push({ name: this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1].name })
      }
    },
   
  }
}
</script>

<style lang="scss">
.mod-sys__log-error {
  &-view-info {
    width: 80%;
  }
}
.mod-sys__log-error-view-info{
  // overflow-y: scroll;
  overflow-y: scroll;
  height: 90%;
  // z-index: 1000;
  // overflow-x: auto;
}
</style>
